<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      textColor: '#00e6ff',
      charts: '',
      xList: [],
      yList: [],
      xyList: [],
      timerList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        animationDuration: 2000, // 动画时长 可以接受 回调函数
        title: {
          show:false,
          text: this.monitorName + '温湿度变化曲线图',
          x: 'center',
          align: 'right',
          textStyle: {
            color: this.textColor
          }
        },
        grid: {
          left: 30,
          right: 30,
          bottom: 20,
          // 区域是否包含坐标轴的刻度标签
          containLabel: false
        },
        legend: {
          data: ['湿度','温度'],
          y: 'top',
          x: 'right',
          padding: [10, 100, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          textStyle: {
            color: this.textColor
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (data.seriesName == '温度') {
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°C')
              } else {
                contentArr.push(Format(new Date(data.value[0])))
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '%')
              }
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },

        },
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          symbol: 'none',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            showMaxLabel: true,
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              return Echarts.format.formatTime('hh:mm:ss', new Date(value))
            },
            interval: 5,
            fontSize: 10,
          },
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          },
        },
        yAxis: [{
          name: '湿度(%RH)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          },
          splitLine: { //网格线：隐藏
            lineStyle: {
              color: 'rgba(127, 127, 127, 0.5)',
              type: 'dashed', // 线型为虚线
            }
          }
        }, {
          name: '温度(℃)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          },
          splitLine: { //网格线：隐藏
            lineStyle: {
              color: 'rgba(127, 127, 127, 0.5)',
              type: 'dashed', // 线型为虚线
            }
          }
        }],
        series: [
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            animation: false,
            symbol: 'none',
            data: this.xList,
            itemStyle: {
              normal: {
                color: '#ffbb00'
              }
            },
            // markPoint: {
            //   symbolSize: 60,
            //   data: [
            //     {type: 'max', name: 'Max'},
            //     {type: 'min', name: 'Min'}
            //   ],
            //   label: {
            //     position: "inside",
            //     distance: 7,
            //     formatter: function (data) {
            //       return data.value + '%'
            //     }
            //   },
            //   itemStyle: {
            //     color: '#ff0000'
            //   }
            // },
          },
          {
            name: '温度',
            type: 'line',
            smooth: true,
            animation: false,
            symbol: 'none',
            data: this.yList,
            itemStyle: {
              normal: {
                color: '#ff0067'
              }
            },
            // markPoint: {
            //   symbolSize: 60,
            //   data: [
            //     {type: 'max', name: 'Max'},
            //     {type: 'min', name: 'Min'}
            //   ],
            //   label: {
            //     position: "inside",
            //     distance: 7,
            //     formatter: function (data) {
            //       return data.value + '℃'
            //     }
            //   },
            //   itemStyle: {
            //     color: '#005eff'
            //   }
            // },
          }
        ]
      }
    }
  },
  methods: {
    addData(data,sampleTime){
      this.xList.shift()
      this.yList.shift()
      this.xList.push([sampleTime, Math.round(data.humi)])
      this.yList.push([sampleTime, Math.round(data.temp)])
      this.charts.setOption(this.options)
      console.log("温湿度数据添加**************************")
    },
    updateEchart(data, monitorName) {
      this.charts.clear()
      this.monitorName = monitorName
      this.xList = data.humidity;
      this.yList = data.temperature;
      this.timerList = data.createTime;
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
